

// 当前显示的是第几个
let currentIndex = 0;
//上一个
let preIndex = 0 ;

//查找搜有的轮播图的图片
// document.querySelector
const imgs = document.querySelectorAll('.swiper img');
const imgSize  = imgs.length;
console.log('@',imgs,)



//轮播 切换显示和隐藏

/***
 * 
 *  每两秒钟 切换下一个
 * 
 */

//切换效果
 function run(){

    preIndex = currentIndex


    currentIndex++;
    if(currentIndex >= imgSize){
        currentIndex = 0;
    }
    

    //设置当前的逗点呗选中
    showActive()


    //  opacity [  隐藏不透明 0------------- 1 完全不透明度 显示]
    //隐藏上一个
    // preIndex
   
    hideImg()



    //显示当前\
    // currentIndex
    // preIndex
    
    showImg();



}  


//使用定时器

// setInterval(  定时执行的代码，  时间间隔    )

let runId = setInterval( run ,  4000  )


/**
 * 隐藏上一个
 */

function hideImg(){
   

    imgs[preIndex].style.opacity = 1
    const time = setInterval(function(){

        let op = imgs[preIndex].style.opacity;
        if(op <=0){
            //停止定时器
            clearInterval(time)
        }
        imgs[preIndex].style.opacity = parseFloat(op) - 0.05
        
      

    }   ,  100  )



}

/**
 * 显示下一个
 */
function showImg(){
    imgs[currentIndex].style.opacity = 0;
    const time = setInterval(function(){

         let op = imgs[currentIndex].style.opacity;
         if(op>=1){
            //停止定时器
            clearInterval(time)
         }
        imgs[currentIndex].style.opacity = parseFloat(op) + 0.05


    }   ,  100  )
}


function showActive(){

    const dots = document.querySelectorAll('.dot');

    //去掉所有的active
    for(let i=0; i<dots.length ;i++){
        // console.log("dots["+i+"].className",dots[i].className)
        dots[i].className = 'dot'
    }

    //给currentIndex 
    dots[currentIndex] .className = 'dot active'

}


//给所有的的逗点添加 点击事件
 const dots = document.querySelectorAll('.dot');

dots.forEach((item, index)=>{
       //给每一个逗点添加事件
        item.addEventListener('click',    ()=>{
                clearInterval(runId)
                preIndex = currentIndex

                console.log('index=',index)  
                currentIndex = index;  
                 //设置当前的逗点呗选中
                showActive()

                //  opacity [  隐藏不透明 0------------- 1 完全不透明度 显示]
                hideImg()

                //显示当前
                showImg();


                runId = setInterval( run ,  4000  )


       })
 } )

const dleft = document.querySelector('.dleft')

const dright = document.querySelector('.dright')

dleft.addEventListener('click',()=>{
    // 切换到上一个
    console.log('切换到上一个');
   clearInterval(runId)

    preIndex = currentIndex
    currentIndex-- 
    if(currentIndex <0){
        currentIndex = imgSize-1;
    }

     //设置当前的逗点呗选中
    showActive()

    //  opacity [  隐藏不透明 0------------- 1 完全不透明度 显示]
    hideImg()

    //显示当前
    showImg();


    runId = setInterval( run ,  4000  )

    
})

dright.addEventListener('click',()=>{
    // 切换到下一个
    console.log('切换到下一个');

   clearInterval(runId)

    preIndex = currentIndex
    currentIndex++ 
    if(currentIndex >=imgSize){
        currentIndex = 0;
    }

     //设置当前的逗点呗选中
    showActive()

    //  opacity [  隐藏不透明 0------------- 1 完全不透明度 显示]
    hideImg()

    //显示当前
    showImg();


    runId = setInterval( run ,  4000  )

})
